<template>
    <section class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <div @click="changeStatus('popupVisible', true)" class="giveMoney_0312"><span>追加求见金额</span><span>{{money}}元</span></div>
        <div class="personNum_0312">已有<span class="num_0312">{{num}}</span>位行家愿意约见</div>
        <div class="applyItem_0312" v-for="(item,key) in applylist" :class="{refusebg:item.State == 1,agree:item.State == 2}">
          <div class="applyTop_0312">
            <div class="applyFace_0312" :style="{background:'url('+ item.HeadUrl +') no-repeat center'}"></div>
            <div class="applyText_0312">
              <p class="p1_0312"><span class="span1_0312">{{item.Name}}</span>{{item.Job}}</p>
              <p class="p2_0312">行家介绍：{{item.Introduce}}</p>
            </div>
          </div>
          <div class="applyBottom_0312">
            <div class="info_0312">匹配度{{item.MatchingRatio}}%</div>
            <div class="info_0312 buttoms_0312" v-if="item.State == 0">
              <button class="agrees_0312" @click="toHomeSwiper(item.AskToSesApplyId,item.OpenId)">同意</button>
              <button class="reject_0312" @click="refuseExper(item.AskToSesApplyId)">拒绝</button>
            </div>
          </div>
        </div>
        <mt-popup class="popupWrap_0315" v-model="popup.popupVisible" position="bottom">
          <div class="popups_0315">
            <div class="btnsWrap_0315">
              <span class="closeBtn_0315" @click="changeStatus('popupVisible', false),closebtm()">关闭</span>
              <span class="sendBtn_0315" @click="changeStatus('popupVisible', false),ThankCost()">确认</span>
            </div>
            <div class="changeMoney_0315">
              <span class="moneys_0315" :class="{activeMoney_0315:item.touched}" v-for="(item,index) in allMoney" @click="changeMoney(index)">{{item.RMB}}元</span>
              <span class="moneys_0315"  @click="otherMoney()" v-if="allMoney.length !== 8">其他</span>
            </div>
          </div>
        </mt-popup>
      </main>
    </section>
</template>
<script>
import myHeader from './base/myHeader';
import { Popup } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch } from '../assets/api';
import {Toast } from 'mint-ui';
export default {
  data () {
    return {
      myObj: {
        type: 3,
        text: '申请列表'
      },
      popup: {
        popupVisible: false,
      },
      applylist:{},
      money:0,
      num:0,
      allMoney:[
        {
          RMB:10,
          touched:true
        },
        {
          RMB:20,
          touched:false
        },
        {
          RMB:50,
          touched:false
        },
      ],
    }
  },
  created() {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.applyData();
    });
  },
  methods: {
    events(i){
      if( i == 2) {
        history.back();
      }
    },
    // 跳到页面
    toHomeSwiper(infoId,opid) {
      this.$router.push({ path: "theme", query: { Id:infoId,openid:opid } });
    },
    changeStatus(str,status){
      this.popup[str] = status;
    },
    closebtm() {
      this.money = 0;
    },
    //添加新的感想费的金额
    otherMoney() {
      MessageBox.prompt("请输入金额",'').then(({ value, action }) => {
        if(!isNaN(value) && value < 10000 && value > 0){
          let arr = {
            RMB:value,
            touched:false
          };
          this.allMoney.push(arr);
        } else {
          Toast("填写内容必须为数字且小于一万")
        }
        if (this.allMoney.length == 8) {
          Toast("最多可添加8个金额")
        }
      },() => {
      });
    },
    //选择感谢费金额
    changeMoney(num) {
      this.money = this.allMoney[num].RMB;
      this.allMoney.forEach(item => {
        item.touched = false
      });
      this.allMoney[num].touched = !this.allMoney[num].touched;
    },
    //获取数据
    async applyData(){
      const res = await fetch(API.getAskToSesApplyList,{
        ...this.loginData[1],
        AskToSeeId: this.$route.query.Id,
        PageIndex:1,
      });
      this.num = res.Result.PageCount;
      this.applylist = res.Result.AskToSesApplys;
    },
    //添加感谢费
    async ThankCost(){
      const res = await fetch(API.AppendThankCost,{
        ...this.loginData[1],
        AskToSeeId: this.$route.query.Id,
        Money:this.money,
      });
      Toast("添加感想费成功");
    },
    //拒绝行家请求
    async refuseExper(infoId){
      const res = await fetch(API.RejectAskToSesApply,{
        ...this.loginData[1],
        AskToSesApplyId: infoId,
      });
      Toast("拒绝成功")
      window.location.reload()
    },
  },
  components: {
    myHeader,
    Popup,
    MessageBox
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    height: 100%;
    main {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      padding-bottom: .15rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      .popupWrap_0315 {
        .popups_0315 {
          width: 3.75rem;
          height: 2.07rem;
          background: white;
          .changeMoney_0315 {
            padding: 0 .12rem;
            box-sizing: border-box;
            .moneys_0315 {
              display: inline-block;
              width: .74rem;
              height: .33rem;
              line-height: .33rem;
              text-align: center;
              color: #828282;
              font-size: .16rem;
              background: #E5E5E5;
              border-radius: .04rem;
              margin: 0 0.16rem 0.16rem 0;
              &:nth-of-type(4n){
                margin: 0 0 0.16rem 0;
              }
            }
            .activeMoney_0315 {
             background: #557AFF;
             color: white;
            }

          }
          .btnsWrap_0315 {
            width: 100%;
            display: flex;
            padding: 0 0 .1rem;
            box-sizing: border-box;
            .closeBtn_0315 {
              display: block;
              width: 50%;
              height: .5rem;
              line-height: .5rem;
              text-align: left;
              font-size: .15rem;
              color: #828282;
              text-align: center;
            }
            .sendBtn_0315 {
              display: block;
              width: 50%;
              height: .5rem;
              line-height: .5rem;
              text-align: right;
              font-size: .15rem;
              color: #39393D;
              text-align: center;
            }

          }

        }
      }
      .refusebg{
        position: relative;
        &::before{
          content: "已拒绝";
          font-size: 0.12rem;
          color: #333;
          display: block;
          position: absolute;
          bottom: 0.2rem;
          right: 0.13rem;
          z-index: 3;
          border-radius: 0.04rem;
        }
      }
      .agree{
        position: relative;
        &::before{
          content: "已同意";
          font-size: 0.12rem;
          color: #333;
          display: block;
          position: absolute;
          bottom: 0.2rem;
          right: 0.13rem;
          z-index: 3;
          border-radius: 0.04rem;
        }
      }
      .applyItem_0312 {
        width: 3.55rem;
        height: 1.25rem;
        background: white;
        border-radius: .04rem;
        margin: 0 auto .1rem;
        padding-top: .18rem;
        box-sizing: border-box;
        .applyBottom_0312 {
          width: 100%;
          height: .47rem;
          display: flex;
          padding: 0 .13rem;
          box-sizing: border-box;
          .info_0312 {
            width: 50%;
            height: .47rem;
            line-height: .47rem;
            color: #557AFF;
            font-size: .13rem;
          }
          .buttoms_0312 {
            padding-top: .1rem;
            box-sizing: border-box;
            button {
              display: block;
              width: .57rem;
              height: .26rem;
              font-size: .13rem;
              font-weight: bold;
              border: none;
              border-radius: .04rem;
              float: right;
              &.reject_0312 {
                background: #E5E5E5;
                color: #39393D;
                margin-right: .15rem;
                
              }
              &.agrees_0312 {
                background: #557AFF;
                color: white;
              }
            }

          }
        }
        .applyTop_0312 {
          width: 100%;
          height: .57rem;
          border-bottom: .01rem solid #E5E5E5;
          display: flex;
          .applyFace_0312 {
            width: .42rem;
            height: .42rem;
            border-radius: 50%;
            background: #EBEBEB;
            margin: 0 .15rem 0 .05rem;
            background-size: cover !important;  
          }
          .applyText_0312 {
            width: 2.8rem;
            .p1_0312 {
              width: 2.8rem;
              font-size: .12rem;
              color: #828282;
              padding-bottom: .1rem;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              .span1_0312 {
                font-size: .14rem;
                color: #39393D;
                padding-right: .04rem;

              }
            }
            .p2_0312 {
                width: 2.8rem;
                font-size: .12rem;
                color: #555555;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
          }
        }
      }
      .giveMoney_0312 {
        width: 100%;
        height: .64rem;
        border-top: .01rem solid #E5E5E5;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #555555;
        font-size: .16rem;
        font-weight: bold;
        padding: 0 .15rem;
        box-sizing: border-box;
        margin-bottom: .08rem;
      }
      .personNum_0312 {
        width: 100%;
        height: .64rem;
        font-size: .16rem;
        color: #555555;
        padding: .33rem .14rem 0 .14rem;
        box-sizing: border-box;
        background: #FAFAFA;
        margin-bottom: .08rem;
        .num_0312 {
          color: #557AFF;
          padding: 0 .02rem;
        }
      }
    }

  }

</style>
<style>
  .mint-msgbox .mint-msgbox-input .mint-msgbox-errormsg {
    display: none;

  }
  .mint-msgbox-content .mint-msgbox-message {
    color: #000;
    font-weight: bold;
  }
  .mint-msgbox .mint-msgbox-input input {
    border: .01rem solid #ccc;
    box-sizing: border-box;
    height: .35rem;
    line-height: .35rem;
  }
</style>
